<template>
	<view class="main">
		<form @submit="formSubmit">
			<view class="form">
				<view class="certification">
					<text>姓名</text>
					<input type="text" v-model="real_name" @blur="names(1)" maxlength="4" placeholder="请输入姓名"
						name="real_name" />
				</view>
				<view class="certification">
					<text>电话</text>
					<input type="number" v-model="mobile" @blur="phones(1)" maxlength="11" placeholder="请输入电话"
						name="mobile" />
				</view>
				<view class="certification">
					<text>邮箱</text>
					<input type="text" v-model="email" @blur="emails()" placeholder="请输入邮箱" name="email" />
				</view>
				<view class="certification">
					<text>紧急联系人</text>
					<input type="text" v-model="othre_name" @blur="names(2)" placeholder="请输入紧急联系人姓名"
						name="othre_name" />
				</view>

				<view class="certification">
					<text>紧急联系人电话</text>
					<input type="number" v-model="othre_mobile" @blur="phones(2)" maxlength="11"
						placeholder="请输入紧急联系人电话" name="othre_mobile" />
				</view>

				<view class="certification">
					<text>身份证号</text>
					<input type="text" v-model="id_card" @blur="idcard()" placeholder="请输入身份证号码" name="id_card" />
				</view>
				<view class="certification">
					<text>身份证</text>
				</view>
				<view class="card">
					<view class="card_img" @click="getImg(1)">
						<image :src="card_img_one==''?'../../../static/images/cardjust.png':card_img_one"
							mode="aspectFit"></image>
						<text>请上传身份证正面</text>
					</view>
					<view class="card_img" @click="getImg(2)">
						<image :src="card_img_two==''?'../../../static/images/cardback.png':card_img_two"
							mode="aspectFit"></image>
						<text>请上传身份证反面</text>
					</view>
				</view>
				<view class="certification hand">
					<text>手持身份证</text>
				</view>
				<view class="card">
					<view class="card_img" @click="getImg(3)">
						<image :src="hand_img==''?'../../../static/images/hand_held.png':hand_img" mode="aspectFit">
						</image>
					</view>
				</view>
			</view>
			<view class="button">
				<button type="success" form-type="submit">提交</button>
			</view>
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				real_name: "", //姓名
				mobile: "", //电话
				email: "", //邮箱
				othre_name: "", //紧急联系人姓名
				othre_mobile: "", //紧急联系人电话号
				id_card: "", //身份证号
				card_img_one: '',
				card_img_two: '',
				hand_img: '',
				totalImg: '',
			}
		},
		methods: {
			names(index) {
				let isChinese = /^[\u4e00-\u9fa5]+$/gi;

				if (index == 1) {
					if (!isChinese.test(this.real_name)) {
						uni.showToast({
							icon: 'none',
							title: '请输入正确的姓名'
						})
						this.real_name = '';
						return false;
					}
				} else {
					if (!isChinese.test(this.othre_name)) {
						uni.showToast({
							icon: 'none',
							title: '请输入正确的姓名'
						})
						this.othre_name = '';
						return false;
					}
				}

			},
			phones(index) {
				let reg = /^((13[0-9])|(14[0-9])|(15[0-9])|(17[0-9])|(18[0-9]))\d{8}$/;
				if (index == 1) {
					if (!reg.test(this.mobile)) {
						uni.showToast({
							icon: 'none',
							title: '请输入正确的11位手机号'
						})
						this.mobile = '';
						return false;
					}
				} else {
					if (!reg.test(this.othre_mobile)) {
						uni.showToast({
							icon: 'none',
							title: '请输入正确的11位手机号'
						})
						this.othre_mobile = '';
						return false;
					}
				}

			},
			emails() {
				let email_reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
				if (!email_reg.test(this.email)) {
					uni.showToast({
						icon: 'none',
						title: '请输入正确的邮箱'
					})
					this.email = '';
					return false;
				}
			},
			idcard() {
				let idreg = /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;

				if (!idreg.test(this.id_card)) {
					uni.showToast({
						icon: 'none',
						title: '请输入正确的邮箱'
					})
					this.email = '';
					return false;
				}

			},
			//上传认证信息
			formSubmit: function(e) {
				console.log(e.detail.value)
				var info = e.detail.value
				if (info.real_name == "" || info.mobile == "" || info.email == "" || info.othre_name == "" || info
					.othre_mobile == "" || info.id_card == "" || this.card_img_one == "" || this.card_img_two == "" ||
					this.hand_img == "") {
					uni.showToast({
						title: "请将数据填写完整",
						icon: "none",
						mask: true,
						duration: 1000
					})
				} else {
					global.$http.request({
						url: '/api/rider_user/up_check_infor',
						data: {
							token: uni.getStorageSync('token'),
							real_name: info.real_name,
							mobile: info.mobile,
							email: info.email,
							othre_name: info.othre_name,
							othre_mobile: info.othre_mobile,
							id_card: info.id_card,
							card_img_one: this.card_img_one,
							card_img_two: this.card_img_two,
							hand_img: this.hand_img,
						}
					}).then(res => {
						console.log(res);
					})
				}
			},
			getImg(id) {
				uni.chooseImage({
					count:1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						console.log(tempFilePaths[0]);
						global.$http.upload('/api/home/picterUp', {
							filePath: tempFilePaths[0], // 要上传文件资源的路径。
							name: 'images', // 文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
							formData: {
								token: uni.getStorageSync('token'),
							}, // HTTP 请求中其他额外的 form data
						}).then(res => {
							console.log(res.data.data.image)
							var img = res.data.data.image
							console.log(id);
							if (id == 1) {
								this.card_img_one = img
							} else if (id == 2) {
								this.card_img_two = img
							} else if (id == 3) {
								this.hand_img = img
							}
						})
					}
				});
			},




		},

	}
</script>

<style lang="scss">
	page {
		font-family: PingFang SC;
		background-color: #f7f7f7;

		.main {
			font-family: PingFang SC;
			margin-top: 10rpx;

			.form {
				.certification {
					display: flex;
					align-items: center;
					width: 750px;
					background: #FFFFFF;
					margin-bottom: 10rpx;

					text {
						display: block;
						width: 21%;
						font-size: 32rpx;
						font-weight: bold;
						color: #333333;
						line-height: 30rpx;
						padding: 24rpx 36rpx;
					}

					input {
						font-size: 28rpx;
						font-weight: bold;
						line-height: 30rpx;
					}
				}

				.hand {
					margin: 20rpx 0;

				}

				.card {
					display: flex;
					justify-content: space-between;
					padding: 8rpx 41rpx;

					.card_img {
						background: #F9F9F9;

						image {
							width: 307rpx;
							height: 194rpx;
							border-radius: 10rpx;
							box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.09);
						}

						text {
							padding-top: 20rpx;
							display: block;
							text-align: center;
							font-size: 24rpx;
							font-weight: 400;
							color: #333333;
						}
					}
				}
			}

			.button {
				background-color: #1DBE61;
				margin-top: 95rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: #FFFFFF;
				line-height: 30rpx;

				button {
					color: #fff !important;
				}
			}
		}
	}
</style>
